/* 
    渲染图片列表
    1.1 获取数据
    1.2 渲染数据
*/
const creator = 'a伦哥'
function getBookList(){
    console.log(creator);
    

    axios({
        url: 'https://hmajax.itheima.net/api/books',
        params:{
            creator
        }
    }).then(
        res =>{
            const bookList = res.data.data
            const htmlStr = bookList.map(
                (item, index) =>{
                    return `<tr>
          <td>${ index + 1}</td>
          <td>${ item.bookname }</td>
          <td>${ item.author }</td>
          <td>${ item.publisher }</td>
          <td data-id=${item.id}>
            <span class="del">删除</span>
            <span class="edit">编辑</span>
          </td>
        </tr>`
                }
            ).join('')
            document.querySelector('.list').innerHTML = htmlStr
        }
    )
}


getBookList()

//创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)

document.querySelector('.add-btn').addEventListener(
    'click', ()=>{

        const addForm = document.querySelector('.add-form')
        const bookObj = serialize(addForm, {hash: true, empty: true})

        //提交到服务器
        axios({
            url: 'https://hmajax.itheima.net/api/books',
            method: 'POST',
            data: {
                ...bookObj,
                creator
            }
        }).then(
            res =>{
                console.log(res);
            }
        )

        getBookList()
        
        addForm.reset()

        addModal.hide()
    }
)

// 删除图书
document.querySelector('.list').addEventListener
('click', e => {
    console.log(e.target);
    //判断点击的是删除元素
    if(e.target.classList.contains('del')){
        const theId = e.target.parentNode.dataset.id;
        
        //调用删除接口
        axios(
            {
                url:`https://hmajax.itheima.net/api/books/${theId}`,
                method:'DELETE'
            }
        ).then(
            res =>{
                console.log(res.data);
                alert(res.data.message)
                 getBookList()
            }

           
        )
    }
}

)

//编辑图书
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)

document.querySelector('.list').addEventListener(
    'click', e =>{
        if(e.target.classList.contains('edit')){

           const theId = e.target.parentNode.dataset.id;

           axios({
            url: `http://hmajax.itheima.net/api/books/${theId}`
           }).then(
            res =>{
                const bookObj = res.data.data
                
                const keys = Object.keys(bookObj)
                console.log(keys);

                keys.forEach(
                    key =>{
                        document.querySelector(`.edit-form .${key}`).value = bookObj[key]
                    }
                )
                
            }
           )

           editModal.show()
            
        }
    }
)



document.querySelector('.edit-btn').addEventListener(
    'click', e =>{
           
           //提交保存修改,并刷新列表
           const editForm = document.querySelector('.edit-form')
           const {
            id, bookname, author, publisher
           } = serialize(editForm, {hash: true, empty:true})
           
           
           axios({
             url:`http://hmajax.itheima.net/api/books/${id}`,
             method: 'PUT',
             data:{
                bookname,
                author,
                publisher,
                creator
             }
           }).then(
            ()=>{
                getBookList()

                editModal.hide()
            }
           )

           editModal.hide()
    }
)